<template>
  <section v-show="visible">
    <section style="height: 550px;" v-loading="tableLoading">
      <section class="row-container-title">
        <el-row class="full">
          <el-col :span="18" class="fullHeight">
            <section class="title-center text-title">
              车牌号
            </section>
          </el-col>

          <el-col :span="6" class="fullHeight">
            <section class="title-center text-title">
              位置
            </section>
          </el-col>
        </el-row>
      </section>

      <section style="height: 500px;overflow-y: auto;">
        <section class="row-container" v-for="(item, index) in dataCollection" :key="index">
          <el-row class="full">
            <el-col :span="18" class="fullHeight">
              <el-tooltip :content="item.carNumber" class="item" effect="dark" placement="top">
                <section class="title-center text">
                  {{item.carNumber}}
                </section>
              </el-tooltip>
            </el-col>


            <el-col :span="6" class="fullHeight">
              <section class="title-center">
                <el-button type="text" style="padding: 0;" @click="handlePosition(item)">
                  <i class="ty icon-dingweiweizhi icon"></i>
                </el-button>
              </section>
            </el-col>
          </el-row>
        </section>
      </section>
    </section>


    <section style="text-align: right;padding: 0px">
      <el-pagination
        :current-page="page.current"
        :page-size="page.limit"
        :pager-count="5"
        :total="page.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="prev, pager, next">
      </el-pagination>
    </section>
  </section>
</template>

<script>
  import {MethodsMixin, QueryParamsMixin} from '@/mixins/global'
  // import carInfoApi from '@carApi/carInfo'

  export default {
    name: 'map-selection-car',
    mixins: [QueryParamsMixin, MethodsMixin],
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      ids: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    watch: {
      ids: {
        handler(event) {
          this.handleLoadAndQuery()
        },
        deep: true
      }
    },
    data() {
      return {
        tableLoading: false,
        dataCollection: []
      }
    },
    methods: {
      /**
       * @Author ling.yuan@topevery.club
       * @Date 2019/12/12 16:28:19
       * @Description 定位 
       */
      handlePosition(item, target = 'car') {
        this.$emit('position', item, target)
      },
      /**
       * @Author ling.yuan@topevery.club
       * @Date 2019/12/12 16:28:24
       * @Description 查询数据 
       */
      handleLoadAndQuery() {
        if (this.ids.length === 0) {
          this.dataCollection = []
          return
        }
        const queryTmp = {
          page: true,
          gpsStatus: '1',
          params: [
            {
              cond: 'eq',
              key: 'dbStatus',
              value: '1'
            },
            {
              key: 'id',
              value: this.ids,
              cond: 'in'
            }
          ]
        }
        const {current, limit} = this.page
        const query = Object.assign({}, {current, limit}, queryTmp)

        this.tableLoading = true
        // carInfoApi.list(query)
        //   .then(res => {
        //     this.tableLoading = false
        //     this.dataCollection = res.data.carInfoVOIPage.records
        //     this.page.total = res.data.carInfoVOIPage.total
        //   })
        //   .catch(() => {
        //     this.dataCollection = []
        //     this.tableLoading = false
        //   })
      }
    }
  }
</script>

<style scoped lang="scss">
  .full {
    width: 100%;
    height: 100%;

    section {
      height: 100%;
    }
  }

  .row-container-title {
    width: 100%;
    height: 40px;
    padding: 0 0 5px 0;
  }

  .row-container {
    width: 100%;
    height: 34px;
    border-top: 1px solid #00000020;
    padding: 5px 0px
  }

  .fullHeight {
    height: 100%;
  }

  .title-center {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    align-items: center;
    justify-content: center;
  }

  .text-title {
    font-size: 14px;
    font-weight: bold;
    color: #409eff;
  }

  .text {
    font-size: 14px;
  }

  .icon {
    font-size: 28px;
    color: #409EFF;
  }
</style>
